<template>
  <div class="box-border px-m">
    <a-card title="工作台" :bordered="false" size="medium" class="card">
      <template #extra>
        <div class="now-time" v-if="time">
          <GiSvgIcon name="time" :size="20"></GiSvgIcon>
          <p class="now-time__time gi_line_1">{{ time }}</p>
        </div>
      </template>
      <a-row align="center" wrap :gutter="[{ xs: 0, sm: 14, md: 14, lg: 14, xl: 14, xxl: 14 }, 16]" class="content">
        <a-col :xs="24" :sm="24" :md="14" :lg="16" :xl="16" :xxl="18">
          <a-space size="medium">
            <a-avatar :size="68">
              <img src="https://images.maishou88.com/admin/union_activities/20230828/20230828143248_5393.jpg" />
            </a-avatar>
            <div class="welcome">
              <p class="hello">{{ goodTimeText() }}，{{ userStore.userInfo.name }} ！开始您一天的工作吧！</p>
              <!-- <p>今日阴转大雨，15℃ - 25℃，出门记得带伞哦。</p> -->
            </div>
          </a-space>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { goodTimeText } from '@/utils/common'
import { useUserStore } from '@/store'
const userStore = useUserStore()
const time = ref('')
const getFormatNowTime = () => {
  const weekList = ['日', '一', '二', '三', '四', '五', '六']
  return `${dayjs(new Date()).format('YYYY年MM月DD日 HH:mm:ss')} 星期${weekList[dayjs(new Date()).day()]}`
}
// 初始化时间
const initTime = () => {
  time.value = getFormatNowTime()
  setInterval(() => {
    time.value = getFormatNowTime()
  }, 1000)
}
initTime()
</script>

<style lang="scss" scoped>
:deep(.arco-statistic-title) {
  margin-bottom: 0;
}

.card {
  margin-top: $margin;
  .content {
    padding: 8px 20px;
    .welcome {
      margin: 8px 0;
      color: $color-text-3;
      .hello {
        font-size: 1.25rem;
        color: $color-text-1;
        margin-bottom: 10px;
      }
    }
  }
}
.now-time {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: DINPro-Medium;
  color: var(--color-text-1);
  &__time {
    margin-left: 6px;
  }
}
</style>
